<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity4">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Insert title here</title>
    <link rel="stylesheet" href="/layui/css/layui.css">
    <style>
        body, html {
            height: 100%;
            margin: 0;
            padding: 0;
            overflow-x: hidden;

        }
    </style>
</head>
<body class="layui-bg-gray">
<script src="/layui/layui.js"></script>
<script src="/webjars/jquery/jquery.js"></script>
<script src="/webjars/echarts/echarts.js"></script>
<blockquote class="layui-elem-quote">
    <div sec:authorize="isAuthenticated()">
        <span th:text="${name}"></span>
        <span sec:authentication="name"></span>，您好，您的角色有：
        <span sec:authentication="principal.authorities"></span>
    </div>
    <div sec:authorize="!isAuthenticated()">
        游客您好。
    </div>
</blockquote>
<div class="layui-row layui-col-space15">
    <div class="layui-col-xs6 layui-col-md6">
        <div class="layui-card">
            <div class="layui-card-header">
                前端框架
            </div>
            <div class="layui-card-body">
                <table class="layui-table">
                <colgroup>
                    <col width="200">
                    <col>
                </colgroup>
                <tbody>
                <tr>
                    <td>核心框架</td>
                    <td>layui,jquery,echarts,模板引擎thymeleaf</td>
                </tr>
                <tr>
                    <td>可重用模块</td>
                    <td>我是一个前端渣渣，这个需要整理 ，9/20 没有</td>
                </tr>
                <tr>
                    <td>推荐连接</td>
                    <td>
                        <span><a class="layui-badge layui-bg-green" target="_blank" href="https://fly.layui.com/jie/24715/">Tab选项卡右键</a></span>
                        <span><a class="layui-badge layui-bg-green" target="_blank"  href="https://fly.layui.com/jie/30625/">树形表格</a></span>
                        <span><a class="layui-badge layui-bg-green" target="_blank"
                                 href="https://www.jianshu.com/p/b8f735ce8359">使用心得</a></span>
                    </td>
                </tr>
                </tbody>
                </table>
            </div>
        </div>
    </div>
    <div class="layui-col-xs6 layui-col-md6">
        <div class="layui-card">
            <div class="layui-card-header">
                后端框架
            </div>
            <div class="layui-card-body">
                <table class="layui-table">
                    <colgroup>
                        <col width="200">
                        <col>
                    </colgroup>
                    <tr>
                        <td>核心框架</td>
                        <td>spring boot2.x,mybatis,mybatis-plus,spring security</td>
                    </tr>
                    <tr>
                        <th>可重用模块</th>
                        <td>security板块</td>
                    </tr>
                    <tr>
                        <th>推荐连接</th>
                        <td>
                            <span><a class="layui-badge layui-bg-green" target="_blank"
                                         href="https://springcloud.cc/spring-security-zhcn.html">spring security</a></span>
                            <span><a class="layui-badge layui-bg-green" target="_blank" href="https://coding.imooc.com/class/134.html" >课程</a></span>
                            <span><a class="layui-badge layui-bg-green" target="_blank"
                                     href="https://www.jianshu.com/p/b8f735ce8359">使用心得</a></span>
                        </td>
                    </tr>
                </table>
            </div>
        </div>
    </div>
</div>
<div class="layui-row layui-col-space15">
    <div class="layui-col-xs6 layui-col-md4">
        <div class="layui-card">
            <div class="layui-card-header">作者个人信息</div>
            <div class="layui-card-body">
                <div class="layui-row">
                    <label>姓名：</label>
                    <span>王叶</span>
                </div>
                <div class="layui-row">
                    <label>社交账号：</label>
                    <span class="layui-breadcrumb">
                        <a href="https://www.jianshu.com/u/6f90e4ea6784" target="_blank">博客</a>
                        <a href="" target="_blank">Gitee</a>
                        <a href="" target="_blank">哈哈</a>
                    </span>
                </div>
                <div class="layui-row">
                    <label>技能：</label>
                </div>
                <div class="layui-row">
                    <div class="layui-row" id="radar_main" style="width: 400px;height:260px;">
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="layui-col-xs6 layui-col-md8">
        <div class="layui-card">
            <div class="layui-card-header">作者其他项目</div>
            <div class="layui-card-body">
                <div class="layui-carousel" id="test1">
                    <div carousel-item>
                        <div>
                            <img src="image/ht.jpg" height="100%" width="100%"/>
                            <a href="index" target="_blank"></a>
                        </div>
                        <div>
                            <img src="image/ht.jpg" height="100%" width="100%"/>
                            <a href="index" target="_blank"></a></div>
                        <div><img src="image/ht.jpg" height="100%" width="100%"/>
                            <a href="index" target="_blank"></a></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="layui-row layui-col-space15">
    <div class="layui-col-xs6 layui-col-md12">
        <div class="layui-card">
            <div class="layui-card-header">更新日志：</div>
            <div class="layui-card-body">
                <ul class="layui-timeline" th:if="${logs}">
                    <li class="layui-timeline-item" th:each="log:${logs}">
                        <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
                        <div class="layui-timeline-content layui-text">
                            <h3 class="layui-timeline-title" th:text="${log.logTitle}">日期/标题</h3>
                            <div th:utext="${log.logContent}">
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>
<script>
    console.log("main 加载")
    //雷达
    var myChart = echarts.init(document.getElementById('radar_main'));
    option = {
        title: {
            confine: true,
        },
        color: '#009688',
        legend: {
            data: ['power'],
            x: 'left',    //延Y轴居中
            y: 'left',
            icon: 'circle',
        },
        radar: {
            name: {
                textStyle: {
                    color: '#fff',
                    backgroundColor: '#999',
                    borderRadius: 3,
                    padding: [3, 5]
                }
            },
            indicator: [
                {name: 'java', max: 100},
                {name: 'go', max: 100},
                {name: 'Spring Boot', max: 100},
                {name: 'Spring Clout', max: 100},
                {name: 'Linux', max: 100},
                {name: '算法', max: 100},
                {name: 'Redis', max: 100},
                {name: 'Mysql', max: 100},
                {name: 'MongoDB', max: 100},
                {name: 'JavaScritp', max: 100}
            ]
        },
        series: [{
            name: 'power',
            type: 'radar',
            data: [
                {
                    value: [80, 10, 70, 20, 60, 60, 60, 60, 10, 60],
                    name: 'power',
                    label: {                    // 单个拐点文本的样式设置
                        normal: {
                            position: 'top',        // 标签的位置。[ default: top ]
                            distance: 5,            // 距离图形元素的距离。当 position 为字符描述值（如 'top'、'insideRight'）时候有效。[ default: 5 ]
                        }
                    },
                    itemStyle: {                // 单个拐点标志的样式设置。
                        normal: {
                            borderColor: '#048496',       // 拐点的描边颜色。[ default: '#000' ]
                            borderWidth: 2,                        // 拐点的描边宽度，默认不描边。[ default: 0 ]
                        }
                    },
                    lineStyle: {                // 单项线条样式。
                        normal: {
                            opacity: 0.5            // 图形透明度
                        }
                    },
                    areaStyle: {                // 单项区域填充样式
                        normal: {
                            color: '#009688'       // 填充的颜色。[ default: "#000" ]
                        }
                    }

                },
            ]
        }]

    };
    myChart.setOption(option)

    layui.use(['element', 'carousel'], function () {
        var element = layui.element;
        var carousel = layui.carousel;
        //建造实例
        carousel.render({
            elem: '#test1'
            , height: '337px'
            , width: '100%' //设置容器宽度
            , arrow: 'always' //始终显示箭头
            , anim: 'default' //切换动画方式
            , autoplay: 'true' //自动切换
            , interval: '3000' //自动切换时间
        });
        //监听事件
        carousel.on('change(test1)', function (obj) { //test1来源于对应HTML容器的 lay-filter="test1" 属性值
            console.log(obj.item); //当前条目的元素对象

        });
    });
</script>

</body>
</html>